<div class="main" #main>
  <div
    class="background"
    [style.right]="scrollBarWidth+'px'"
    *ngIf="backgroundURL"
    [style.background-image]="'url(' + backgroundURL + ')'"
    [@imgLoad]="imgState"
  >
    <div class="background"></div>
  </div>
  <div class="container-buttons">
    <div>
      <button
        *ngIf="showToTop"
        @showChange
        (click)="scrollToTop()"
        matRipple
        mat-mini-fab
        matTooltip="To top"
        matTooltipPosition="left"
        class="icon-common mat-elevation-z2"
        aria-label="To top"
      >
        <mat-icon>keyboard_arrow_up</mat-icon>
      </button>
    </div>
    <div>
      <button
        matRipple
        mat-mini-fab
        [matMenuTriggerFor]="menu"
        class="icon-common mat-elevation-z2"
        aria-label="menu"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu" xPosition="before">
        <button mat-menu-item class="align-v" (click)="openManual()">
          <mat-icon class="align-icon material-icons-outlined">explore</mat-icon>
          <span>{{ 'MENU.MANUAL.TITLE' | translate }}</span>
        </button>
        <button mat-menu-item class="align-v" (click)="removeCurrentCache()">
          <mat-icon class="align-icon">layers_clear</mat-icon>
          <span>{{ 'MENU.DELETE_CACHE.TITLE' | translate }}</span>
        </button>
      </mat-menu>
    </div>
  </div>
  <div class="content" [@otherLoad]="otherState">
    <app-character
      class="use-visible-low"
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_character]]"
      [name]="name_character"
      (draged)="onChildStartDrag($event)"
    ></app-character>
    <app-weapon
      class="use-visible"
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_weapon]]"
      [name]="name_weapon"
      (draged)="onChildStartDrag($event)"
    ></app-weapon>
    <app-talent
      class="use-visible"
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_talent]]"
      [name]="name_talent"
      (draged)="onChildStartDrag($event)"
    ></app-talent>
    <app-constellation
      class="use-visible"
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_constellation]]"
      [name]="name_constellation"
      (draged)="onChildStartDrag($event)"
    ></app-constellation>
    <app-enemy
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_enemy]]"
      [name]="name_enemy"
      (draged)="onChildStartDrag($event)"
    ></app-enemy>
    <app-artifact
      class="use-visible-low"
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_artifact]]"
      [name]="name_artifact"
      (draged)="onChildStartDrag($event)"
    ></app-artifact>
    <app-team
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_other]]"
      [name]="name_other"
      (draged)="onChildStartDrag($event)"
    ></app-team>
    <app-other
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_team]]"
      [name]="name_team"
      (draged)="onChildStartDrag($event)"
    ></app-other>
    <app-dps
      [data]="data"
      [language]="currentLanguage"
      [cardWidth]="setCardWidth"
      [zIndex]="childZIndexes[childNameMap[name_dps]]"
      [name]="name_dps"
      (draged)="onChildStartDrag($event)"
    ></app-dps>
  </div>
</div>
